<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shop</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet/less" href="./assets/css/reset.less">
    <link rel="stylesheet/less" href="./assets/css/common.less">
    <link rel="stylesheet/less" href="./assets/css/shop.less">
</head>

<body>
    <header class="header" id="header">
        <a href="javascript:history.back(-1)">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <span class="title" id="title">Shop</span>
        <input type="checkbox" name="list" id="checkbox">
        <label for="checkbox">
            <span id="label" class="glyphicon glyphicon-menu-hamburger"></span>
        </label>

        <div class="menulist" id="menulist">
            <ul>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/profile icon.png" alt="">
                        </div>
                        <span>
                            Profile
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/inbox icon.png" alt="">
                        </div>
                        <span>
                            Inbox
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/Pointer.png" alt="">
                        </div>
                        <span>
                            Location
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/_.png" alt="">
                        </div>
                        <span>
                            FAQs
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/settings.png" alt="">
                        </div>
                        <span>
                            Settings
                        </span>
                    </div>

                </li>
                <li>
                    <div class="red">
                        <div class="img">
                            <img src="./assets/images/logout icon.png" alt="">
                        </div>
                        <span>
                            Sign Out
                        </span>
                    </div>

                </li>
            </ul>
        </div>
    </header>

    <div class="shoplist">
        <span class="title">Food Items</span>
        <div class="content">
            <div class="latest">
                <span>Latest</span>
            </div>
            <div class="latest">
                <span>Popular</span>
            </div>
        </div>

        <div class="goods">
            <ul>
                <li>
                    <div class="show">
                        <img src="./assets/images/Layer 9.png" alt="">
                        <img class="fav" src="./assets/images/favorite.png" alt="">
                        <img class="favin" src="./assets/images/favoritein.png" alt="">

                        <div class="addcar">
                            <button class="btn">
                                Add to Cart +
                            </button>
                            <a href="javascript:void(0)">
                                <img src="./assets/images/hover icon.png" alt="">
                            </a>
                        </div>
                    </div>
                    <span>Picnic Cupcakes</span>
                    <div class="price">
                        <span>Price:</span>
                        <span>$5</span>
                    </div>

                </li>
                <li>
                    <div class="show">
                        <img src="./assets/images/Layer 9.png" alt="">
                        <img class="fav" src="./assets/images/favorite.png" alt="">
                        <img class="favin" src="./assets/images/favoritein.png" alt="">

                        <div class="addcar">
                            <button class="btn">
                                Add to Cart +
                            </button>
                            <a href="javascript:void(0)">
                                <img src="./assets/images/hover icon.png" alt="">
                            </a>
                        </div>
                    </div>
                    <span>Picnic Cupcakes</span>
                    <div class="price">
                        <span>Price:</span>
                        <span>$5</span>
                    </div>
                </li>
                <li>
                    <div class="show">
                        <img src="./assets/images/Layer 9.png" alt="">
                        <img class="fav" src="./assets/images/favorite.png" alt="">
                        <img class="favin" src="./assets/images/favoritein.png" alt="">

                        <div class="addcar">
                            <button class="btn">
                                Add to Cart +
                            </button>
                            <a href="javascript:void(0)">
                                <img src="./assets/images/hover icon.png" alt="">
                            </a>
                        </div>
                    </div>
                    <span>Picnic Cupcakes</span>
                    <div class="price">
                        <span>Price:</span>
                        <span>$5</span>
                    </div>
                </li>
                <li>
                    <div class="show">
                        <img src="./assets/images/Layer 9.png" alt="">
                        <img class="fav" src="./assets/images/favorite.png" alt="">
                        <img class="favin" src="./assets/images/favoritein.png" alt="">

                        <div class="addcar">
                            <button class="btn">
                                Add to Cart +
                            </button>
                            <a href="javascript:void(0)">
                                <img src="./assets/images/hover icon.png" alt="">
                            </a>
                        </div>
                    </div>
                    <span>Picnic Cupcakes</span>
                    <div class="price">
                        <span>Price:</span>
                        <span>$5</span>
                    </div>
                </li>
                <li>
                    <div class="show">
                        <img src="./assets/images/Layer 9.png" alt="">
                        <img class="fav" src="./assets/images/favorite.png" alt="">
                        <img class="favin" src="./assets/images/favoritein.png" alt="">

                        <div class="addcar">
                            <button class="btn">
                                Add to Cart +
                            </button>
                            <a href="javascript:void(0)">
                                <img src="./assets/images/hover icon.png" alt="">
                            </a>
                        </div>
                    </div>
                    <span>Picnic Cupcakes</span>
                    <div class="price">
                        <span>Price:</span>
                        <span>$5</span>
                    </div>
                </li>
                <li>
                    <div class="show">
                        <img src="./assets/images/Layer 9.png" alt="">
                        <img class="fav" src="./assets/images/favorite.png" alt="">
                        <img class="favin" src="./assets/images/favoritein.png" alt="">



                        <div class="addcar">
                            <button class="btn">
                                Add to Cart +
                            </button>
                            <a href="javascript:void(0)">
                                <img src="./assets/images/hover icon.png" alt="">
                            </a>
                        </div>
                    </div>
                    <span>Picnic Cupcakes</span>
                    <div class="price">
                        <span>Price:</span>
                        <span>$5</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>


<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    var header = $("#header")
    var title = $("#title")
    var checkbox = $("#checkbox")
    var label = $("#label")
    var menulist = $("#menulist")
    var fav = $(".fav")
    var favin = $(".favin")
    var btn = $(".btn")

    btn.click(function(){
        window.location.href = "cart.html"; 
    })


    label.click(function () {

        if ($("#checkbox").is(":checked") == true) {

            document.getElementById("title").innerHTML = 'Shop';
            label.addClass("glyphicon-menu-hamburger")
            label.removeClass("glyphicon-remove")
            header.css({ background: "transparent" })
            menulist.hide("slow", function () {
                menulist.css({ display: 'none' })
            });


        } else {
            document.getElementById("title").innerHTML = 'MENU';
            label.removeClass("glyphicon-menu-hamburger")
            label.addClass("glyphicon-remove")
            header.css({ background: "#ffbf25" })
            menulist.show("slow", function () {
                menulist.css({ display: 'block' })
            });
        }
    });

    fav.click(function () {

        $(this).next(".favin").css({ display: "block" })
        $(this).css({ display: "none" })
    })

    favin.click(function () {
        $(this).css({ display: "none" })
        $(this).prev(".fav").css({ display: "block" })
    })

</script>